<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a name ="head">[页面头部]</a>
	<!-- 多级标题演示   这是注释，在浏览器的网页源码中可见，不会被浏览器渲染输出！-->
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
	<!-- hr 水平线标签 -->
	<hr>
	<!-- P 段落标签 -->
	<p>这是一个段落！</p>
	<p>这是第二个段落！</p>
	<hr />
	<!--  自闭和标签 -->
	<!-- 有序列表标签 -->
	<h2>注册步骤：</h2>
	<ol>
		<li>填写信息</li>
		<li>确认邮件</li>
		<li>注册成功</li>
	</ol>
	<!-- 无序列表 -->
	<p>编程语言有：</p>
	<ul>
		<li>Java</li>
		<li>Python</li>
		<li>C++</li>
		<li>PHP</li>
	</ul>
	<!-- 描述标签 -->
	<dl>
		<dt>咖啡</dt>
		<dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd>
		<dd>可以提神，刺激神经。</dd>
	</dl>
	<dl>
		<dt>图片的HTML代码（后续讲解）……
		<dt>
		<dd>商品名称：灿坤蒸气电熨斗</dd>
		<dd>商品价格：388元</dd>
		<dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd>
	</dl>
	<!-- 表格标签 -->
	<table border="1" style="background-color: red;">
		<tr>
			<td>百度</td>
			<td>新浪</td>
			<td>搜狐</td>
		</tr>
		<tr>
			<td>Google</td>
			<td>Apple</td>
			<td>Oracle</td>
		</tr>
	</table>
	<hr />
	<a href="#foot">回到底部</a>
	<!-- form标签，是和后端交互的重要标签 -->
	<center>
		<form action="./../index.html" method="post">
			<table border="1">
				<tr>
					<td>用户名：</td>
					<td><input name="username" type="text" /></td>
					<td>可包含....</td>
				</tr>
				<tr>
					<td>密 码：</td>
					<td><input name="passwd" type="password"></td>
					<td>至少包含6个字符</td>
				</tr>
				<tr>
					<td><input name="login" type="submit"></td>
					<td><input name="reset" type="reset"></td>
				</tr>
			</table>
		</form>
	</center>
	<!-- div 标签  常用来添加样式 -->
	<div style="width: 400px; height: 300px; background: #9FF">
		<h3>程序员新人上路</h3>
		<ul>
			<li>Java</li>
			<li>Python</li>
			<li>C++</li>
			<li>PHP</li>
		</ul>
		div其实就是一个......
	</div>
	<!-- img 图片标签 -->
	<img alt="演示图片" src="./../imgs/demo.jpg" title="标题" width="500"
		height="500">
	<!-- br 换行标签 -->
	<br>
	<!-- span 标签 也是用来添加样式的 -->
	<span style="color: red;font-size: 70px">这是一个Span标签</span>
	<br> 这是一个Span标签
	<a name ="foot">[页面底部]</a>

</body>
</html>